<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ajax</title>
    <link rel="stylesheet" href="css/public/base.css">
    <link rel="stylesheet" href="css/articles.css">
    <script src="js/public/jquery-1.9.0.min.js"></script>
    <script src="js/public/globle.js"></script>
</head>
<body>
<header id="headerWrap"></header>

<section id="content">
    <article class="articles">
        <h1 id="title" class="article_title">jQuery Ajax</h1>
        <h3 class="subtitle">.load()</h3>
        <pre>
$('#wrapLoad').load('ajax/test.html')

$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});

$('#wrapLoad').load('ajax/test.html #container');
        </pre>
        <a id="btnLoad" href="javascript:void(0)">点我load</a>
        <div id="wrapLoad"></div>
        <script>
            $(function(){
                $('#wrapLoad').load('ajax/test.html #target');
                $('#btnLoad').bind('click',function(){
                    $('#wrapLoad').load('ajax/test.html',function(){
                        $('#wrapLoad').fadeIn();
                        var delayOutId=setTimeout(function(){
                            $('#wrapLoad').fadeOut(500,function(){
                                $('#wrapLoad').html('');
                            });
                        },3000)
                    });
                })
            });
        </script>
        <hr>
        <div id="wrapGet"></div>
        <script>
            $(function(){
                $.get('ajax/test.html', function(data) {
                    $('#wrapGet').html(data);
                    alert('Load was performed.');
                });
            })
        </script>

        <hr>
        <div id="wrapAjax"></div>
        <script>
            $(function(){
                $.ajax({
                    url: "ajax/test.html?timestamp="+new Date().getTime(),
                    success: function(html){
                        $('#wrapAjax').append(html);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                    statusCode: {
                        404: function(){
                            alert("页面未找到!");
                        },
                        200: function(){
                            alert("请求页面成功!");
                        },//验证响应信息
                        0: function(){
                            alert('状态0');
                        }
                    },
                    cache: true,
                    dataType: "html"
                });
            })
        </script>
    </article>
</section>

<footer id="footer"></footer>
</body>
</html>